オンランプとカスタムトークンへのスワップ

サポートされているトークンにオンランプし、ご自身のカスタムトークンへスワップします。

多くの有名なトークンはすでにサポートされていますが、場合によってはユーザーがカスタムトークンへスワップできるようにしたいこともあります。 この例では、Web SDKを使って2ステップでその方法をご紹介します。

インテグレーション

オンランプとカスタムトークンへのスワップを組み込むには、以下の手順に従ってください。

1. Web SDKで接続する

   はじめにガイドを完了してください。

2. サポートされているトークンにオンランプする

   オンランプガイドを完了してください。

3. オンランプが成功した後に状態を更新する

   オンランプが成功したら、onOrderSuccessfulコールバックを使ってアプリの状態を更新できます。

     import { useState } from 'react'
     import { useAddFundsModal } from '@0xsequence/checkout'
     import { useAccount } from 'wagmi'
   
     export const OnRampAndSwap = () => {
         const { triggerAddFunds: toggleAddFunds } = useAddFundsModal()
         const { address: smartWalletAddress } = useAccount()
         const [canSwap, setCanSwap] = useState(true)
   
         const onTriggerAddFunds = () => {
             if (smartWalletAddress) {
                 toggleAddFunds({
                     walletAddress: smartWalletAddress,
                     onOrderSuccessful(data) {
                         console.log('Order successful', data)
                         setCanSwap(true)
                     },
                 })
             }
         }
   
         return (
             <>
                 <button onClick={onTriggerAddFunds}>On Ramp</button>
             </>
         )
     }
   

4. Smart Swapsでカスタムトークンにスワップする

   オンランプが完了したら、useSwapModalフックを使って購入したトークンをカスタムトークンにスワップできます。

   オンランプしたトークンがスマートウォレットで利用可能になるまで数分（1〜3分）かかるため、スワップモーダルを開く前に残高を確認してください。 サポートされている支払いトークンの残高が十分にあれば、モーダルで支払いオプションとして表示されます。支払いトークンを指定する必要はありません。

   カスタムトークンに十分な流動性が、スワップを実行するチェーン上にあることを確認してください。

     import { useState } from 'react'
     import { SwapModalSettings, useAddFundsModal, useSwapModal } from '@0xsequence/checkout'
     import { useAccount } from 'wagmi'
   
     export const OnRampAndSwap = () => {
         const { triggerAddFunds: toggleAddFunds } = useAddFundsModal()
         const { openSwapModal } = useSwapModal()
         const { address: smartWalletAddress, chainId } = useAccount()
         const [canSwap, setCanSwap] = useState(true)
   
         const toTokenAmount = '10000000000' // amount in wei
         const toTokenAddress = '0x...' // custom token address
   
         const onTriggerAddFunds = () => {
             if (smartWalletAddress) {
                 toggleAddFunds({
                     walletAddress: smartWalletAddress,
                     onOrderSuccessful(data) {
                         console.log('Order successful', data)
                         setCanSwap(true)
                     },
                 })
             }
         }
   
         const onSwap = () => {
             const swapModalSettings: SwapModalSettings = {
                 onSuccess: () => {
                     console.log('Swap successful')
                 },
                 chainId,
                 toTokenAddress,
                 toTokenAmount,
                 title: `Buy our custom token`,
                 description: 'Choose your payment method'
             }
   
             openSwapModal(swapModalSettings)
         }
   
         return (
             <>
                 {canSwap ? <button onClick={onSwap}>Swap</button> : <button onClick={onTriggerAddFunds}>On Ramp</button>}
             </>
         )
     }
   

おめでとうございます！Web SDKを使ってオンランプし、カスタムトークンへスワップする方法を学びました。